<template>
	<view class="count">
		<view class="topHeacd f f-a-c f-j-b p-25">
			<view class="num">
				全部商品({{list.reduce((accumulator, obj) => {
						const product = obj.num;
						return accumulator + product;
					}, 0)}})
			</view>
			<view class="Editing" @click="goTopRState" :class="{act:topRState==2}">
				{{topR}}
			</view>
		</view>
		<view class="body p-25">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view v-for="(item,index) in list" :key="index" @click="goShoopDetil(item)"
					class="item p-30 b-r-20 b-f f f-a-c">
					<view class="leftImg" @click.stop="xuanze(item)">
						<image src="/static/show2.png" v-if="item.show" class="state" mode="">
						</image>
						<image src="/static/show1.png" v-else class="state" mode=""></image>
					</view>
					<view class="cenImg">
						<image :src="item.image" class="rigImg" mode="aspectFill"></image>
					</view>
					<view class="rigText">
						<view v-if="item.invalid" class="mask"></view>
						<view class="rigTop">
							{{item.name}}
						</view>
						<view class="counst">
							{{item.sku_name}}
						</view>
						<!--  -->
						<view class="price f f-a-c f-j-b">
							<view class="pice">
								￥{{item.price}}
							</view>
							<view class="m-t-20">
								<u-number-box v-model="item.num" min="1" @minus="valChange($event,item)"
									@plus="valChange($event,item)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="botButton f f-j-b">
			<view class="lef f f-a-c">
				<image src="/static/show2.png" v-if="staticShow" @click.stop="zongStat(1)" class="state" mode="">
				</image>
				<image src="/static/show1.png" class="state" @click.stop="zongStat(2)" v-else mode=""></image>
				全选
			</view>
			<view class="rig f f-a-c">
				<view v-if="topRState==1" class="heji f f-a-c">
					合计 <text>￥{{Number(prices).toFixed(2)||'0.00'}}</text>
				</view>
				<view v-if="topRState==1" @click="settle" class="btn f f-a-c f-j-c">
					结算({{jiesaun}})
				</view>
				<view v-if="topRState==2" @click="detilSahn" class="btn f f-a-c f-j-c">
					删除({{jiesaun}})
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jiesaun: 0,
				values: 1,
				topR: '编辑',
				topRState: 1,
				list: [{
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}, {
					show: false,
					value: 1
				}],
				staticShow: false,
				prices: ''
			}
		},
		computed: {
			// 	prices() {
			// 		const total = this.list.reduce((accumulator, obj) => {
			// 			if (obj.show) {
			// 				console.log(obj, '333333333');
			// 				const product = obj.num * obj.price;
			// 				return accumulator + product;
			// 			}
			// 		}, 0);
			// 		console.log(total, '11111111111111111111111111');
			// 	}
		},
		onShow() {
			this.initList()
		},
		methods: {
			goShoopDetil(item) {
				uni.navigateTo({
					url: '/pages/shoop/shoopDetils?id=' + item.product_id
				})
			},
			// 点击结算
			settle() {
				let lists = []
				let newList = this.list.filter(item => item.show)
				newList.forEach(ite => {
					lists.push({
						id: ite.price_id,
						num: ite.num
					})
				})
				console.log(lists, '55555555555');
				if (lists.length == 0) return this.$msg('请选择商品')
				uni.navigateTo({
					url: '/pages/shoop/ConfirmTheOrder?type=1&num=2&price=' + JSON.stringify(lists)
				})
			},
			// 点击删除
			async detilSahn() {
				let n = this.list.filter(item => item.show)
				let m = n.map(item => item.id)
				console.log(m, '5555555555');
				let l = await this.$api.detListNum({
					ids: m
				})
				this.$msg(l.msg)
				if (l.code == 200) {
					setTimeout(() => {
						this.prices = ''
						this.jiesaun = 0
						this.staticShow = false
						this.initList()
					}, 800)
				}
			},
			async initList() {
				let n = await this.$api.shop_cartList()
				n.data.forEach(item => {
					item.show = false
				})
				this.list = n.data
			},
			zongStat(num) {
				if (num == 1) {
					// console.log('11111');
					this.prices = ''
					this.jiesaun = 0
				} else {
					// 结算的价格
					this.prices = this.list.reduce((accumulator, obj) => {
						const product = obj.num * obj.price;
						return accumulator + product;
					}, 0);
					// 结算价格
					this.jiesaun = this.list.reduce((accumulator, obj) => {
						const product = obj.num;
						return accumulator + product;
					}, 0);
				}
				if (this.staticShow) {
					this.staticShow = false
					this.list.forEach(item => {
						item.show = false
					})
				} else if (!this.staticShow) {
					this.staticShow = true
					this.list.forEach(item => {
						if (!item.invalid) {
							item.show = true
						}
					})
				}
			},
			xuanze(item) {
				if (this.topRState == 1 && item.invalid) {
					return this.$msg('商品不存在')
				}
				item.show = !item.show
				let n = this.list.filter(item => item.show == true)
				console.log(n, '222222222222');
				// 结算的价格
				this.prices = n.reduce((accumulator, obj) => {
					const product = obj.num * obj.price;
					return accumulator + product;
				}, 0);
				// 结算的数量
				this.jiesaun = n.reduce((accumulator, obj) => {
					const product = obj.num;
					return accumulator + product;
				}, 0);
				if (n.length == this.list.length) {
					this.staticShow = true
				} else {
					this.staticShow = false
				}
			},
			goTopRState() {
				if (this.topRState == 1) {
					this.topRState = 2
					this.topR = '取消编辑'
				} else {
					this.topRState = 1
					this.topR = '编辑'
				}
			},
			async valChange(e, item) {
				console.log('当前值为: ' + e.value, item, '55555555555555')
				let n = await this.$api.augmentNum({
					num: e.value
				}, item.price_id)
				this.$msg(n.msg)
				if (n.code == 200) {
					this.initList()
				}
			},
			onreachBottom() {
				console.log('444444444444');
			}
		}
	}
</script>
<style lang="scss" scoped>
	.botButton {
		position: fixed;
		height: 136rpx;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 0 30rpx;
		background: #fffefc;

		.rig {
			.btn {
				margin-left: 30rpx;
				width: 212rpx;
				height: 88rpx;
				background: #977961;
				border-radius: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: center;
				color: #ffffff;
			}

			.heji {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #2f2319;

				text {
					font-size: 40rpx;
					font-family: 'HarmonyOS Sans Bold';
					font-weight: 700;
					text-align: LEFT;
					color: #977961;
				}
			}
		}

		.lef {

			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: #2f2319;

			.state {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}

	/deep/ .u-numberbox {
		border: 2rpx solid #ebe2da;
		width: 200rpx;
		border-radius: 20rpx !important;
	}

	/deep/ .u-icon-disabled {
		background: #fff !important;
	}

	/deep/ .u-number-input {
		background-color: transparent !important;
	}

	/deep/ .u-icon-plus {
		background-color: transparent !important;
	}

	/deep/ .u-icon-minus {
		background-color: transparent !important;
	}

	.body {
		height: calc(100vh - 108rpx);
		padding-bottom: 150rpx;

		.item {

			// height: 240rpx;
			margin-bottom: 20rpx;



			.rigText {
				position: relative;
				width: 60%;
				box-sizing: border-box;

				.mask {
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, 0.6);
					top: 0%;
					left: 0;
					z-index: 999;
				}

				.rigTop {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #2f2319;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					margin-bottom: 10rpx;
					box-sizing: border-box;
				}

				.counst {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ada6a0;
					margin-bottom: 30rpx;
					box-sizing: border-box;
				}

				.price {
					.pice {
						font-family: 'HarmonyOS Sans Bold';
						color: #2f2319;
						font-weight: 700;
						font-size: 28rpx;
					}
				}
			}

			.leftImg {
				width: 15%;
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;

				.state {
					width: 100%;
					height: 100%;
				}
			}

			.cenImg {
				width: 20%;
				width: 176rpx;
				height: 176rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
				overflow: hidden;

				.rigImg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		overflow-y: auto;

		.topHeacd {
			width: 100%;
			height: 108rpx;
			background: #fffefc;

			.num {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.Editing {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hei;
			}
		}
	}

	.act {
		color: #977961 !important;
	}
</style>